<script setup>
import api from '../api/re_api.js'
import {ref,onMounted} from "vue";
import {ElMessageBox} from "element-plus";
import lodash from 'lodash'
//定义绑定的数据
//表格中的数据
const tableData = ref([]);

const total = ref(0);
const editWinVisible = ref(false);
const addWinVisible = ref(false);
//查询的数据
const searchObj =ref( {
  current: 1,//当前页码
  limit: 10,//每页条数
  resident_id: '',//查询条件
  event_type: '',
  urgency_level: '',
  status: '',
})
const search = async () => {
  var result=await api.page(searchObj.value);//刷新数据
  tableData.value = result.data;
  total.value = result.count;
}
//要修改或者新增的数据
const editObj = ref({});
const addObj = ref({});

onMounted(async ()=>{
  search();
})
//页面加载后挂载的数据

//定义方法
const handleAvatarSuccess=(response,file) => {//头像上传成功
  console.log('---------------------');
  console.log(response);//响应数据
  editObj.value.images=response.data;//设置头像
}
const handleSizeChange = (val) => {
  search.log(searchObj)
  search();
}
const handleCurrentChange = (val) => {
  searchObj.value.current = val;
  search();
}
const editCancel=()=>{
  editObj.value = {};//清空数据
  editWinVisible.value = false;//关闭窗口
}
const editCommit=async () =>{
  await api.edit(editObj.value);//新增或修改
  search();//刷新数据
  editWinVisible.value = false;//关闭窗口
}
const addCancel=()=>{
  addObj.value = {};//清空数据
  addWinVisible.value = false;//关闭窗口
}
const addCommit=async () =>{
  await api.add(addObj.value);//新增或修改
  search();//刷新数据
  addWinVisible.value = false;//关闭窗口
  addObj.value = {};
}

const handleSearch = () => {
  searchObj.value.current = 1;
  search();
}
const handleAdd = (index, row) => {
  addWinVisible.value = true;//显示窗口
  console.log(index, row)//获取当前行数据
}

const handleEdit = (index, row) => {
  editObj.value=lodash.clone(row)//拷贝数据
  editObj.value = row;//设置要修改的数据
  editWinVisible.value = true;//显示窗口
  console.log(index, row)//获取当前行数据
}
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确认删掉这条数据吗？',
      '删除提示',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'errpr',
      }
  )
      .then(async () => {
        api.del(row.id);
        //刷新数据
        searchObj.value.current=1;//设置从第一页开始查询
        search();
      })
      .catch(() => {

      })
}


</script>

<template>
  <!--  查询-->
  <el-form :inline="true" :model="searchObj" class="demo-form-inline" style="margin-top: 10px">
    <el-form-item label="上报居民ID" :label-width="formLabelWidth">
      <el-input v-model="searchObj.resident_id" autocomplete="off" />
    </el-form-item>
    <el-form-item label="事件类型" :label-width="formLabelWidth">
      <el-select v-model="searchObj.event_type" placeholder="请选择安全等级" style="width: 100px">
        <el-option label="" value="" />
        <el-option label="受伤" value="受伤" />
        <el-option label="火灾" value="火灾" />
        <el-option label="洪灾" value="洪灾" />
        <el-option label="病虫害" value="病虫害" />
        <el-option label="耕地纠纷" value="耕地纠纷" />
        <el-option label="牲畜丢失" value="牲畜丢失" />
        <el-option label="疾病求医" value="疾病求医" />
        <el-option label="其他" value="其他" />
      </el-select>
    </el-form-item>
    <el-form-item label="紧急程度" :label-width="formLabelWidth">
      <el-select v-model="searchObj.urgency_level" placeholder="请选择安全等级" style="width: 100px">
        <el-option label="" value="" />
        <el-option label="低" value="低" />
        <el-option label="中" value="中" />
        <el-option label="高" value="高" />
        <el-option label="紧急" value="紧急" />
      </el-select>
    </el-form-item>
    <el-form-item label="处理状态" :label-width="formLabelWidth">
      <el-select v-model="searchObj.status" placeholder="请选择安全等级" style="width: 100px">
        <el-option label="" value="" />
        <el-option label="已上报" value="已上报" />
        <el-option label="已受理" value="已受理" />
        <el-option label="处理中" value="处理中" />
        <el-option label="已解决" value="已解决" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSearch">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleAdd">新增</el-button>
    </el-form-item>
  </el-form>
  <!--  展示-->
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="记录ID" width="80">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="上报居民ID" width="80">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #reference>
            <el-tag>{{ scope.row.resident_id }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="事件类型" width="80">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #reference>
            <el-tag>{{ scope.row.event_type }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="发生时间" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #reference>
            <el-tag>{{ scope.row.event_time }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="上报时间" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #reference>
            <el-tag>{{ scope.row.report_time }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="事件地点" width="80">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #reference>
            <el-tag>{{ scope.row.location }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="事件描述" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #reference>
            <el-tag>{{ scope.row.description }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="紧急程度" width="80">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #reference>
            <el-tag>{{ scope.row.urgency_level }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="处理状态" width="80">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #reference>
            <el-tag>{{ scope.row.status }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="头像" width="100">
      <template #default="scope">
        <el-avatar :src="scope.row.images" size="medium">
          <!-- 当没有头像时显示默认图标 -->
          <img src='../assets/logo.png' alt="默认头像" v-if="!scope.row.uimg" />
        </el-avatar>
      </template>
    </el-table-column>
    <el-table-column label="数据更新" width="180">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      v-model:current-page="searchObj.current"
      v-model:page-size="searchObj.limit"
      :page-sizes="[10, 20, 30, 40]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />

  <!--  编辑对话框-->
  <el-dialog v-model="editWinVisible" title="编辑" width="800">
    <el-form :model="editObj">
      <el-form-item label="上报居民ID" :label-width="formLabelWidth">
        <el-input v-model="editObj.resident_id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="事件类型" :label-width="formLabelWidth">
        <el-select v-model="editObj.event_type" placeholder="请选择安全等级" style="width: 180px">
          <el-option label="" value="" />
          <el-option label="受伤" value="受伤" />
          <el-option label="火灾" value="火灾" />
          <el-option label="洪灾" value="洪灾" />
          <el-option label="病虫害" value="病虫害" />
          <el-option label="耕地纠纷" value="耕地纠纷" />
          <el-option label="牲畜丢失" value="牲畜丢失" />
          <el-option label="疾病求医" value="疾病求医" />
          <el-option label="其他" value="其他" />
        </el-select>
      </el-form-item>
      <el-form-item label="发生时间" :label-width="formLabelWidth">
        <el-date-picker
            v-model="editObj.event_time"
            type="date"
            placeholder="请选择事件发生时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="事件地点" :label-width="formLabelWidth">
        <el-input v-model="editObj.location" autocomplete="off" />
      </el-form-item>
       <el-form-item label="事件描述" :label-width="formLabelWidth">
         <el-input v-model="editObj.description" autocomplete="off" />
      </el-form-item>
      <el-form-item label="紧急程度" :label-width="formLabelWidth">
        <el-select v-model="editObj.urgency_level" placeholder="请选择安全等级" style="width: 180px">
          <el-option label="" value="" />
          <el-option label="低" value="低" />
          <el-option label="中" value="中" />
          <el-option label="高" value="高" />
          <el-option label="紧急" value="紧急" />
        </el-select>
      </el-form-item>
      <el-form-item label="处理状态" :label-width="formLabelWidth">
        <el-select v-model="editObj.status" placeholder="请选择安全等级" style="width: 180px">
          <el-option label="" value="" />
          <el-option label="已上报" value="已上报" />
          <el-option label="已受理" value="已受理" />
          <el-option label="处理中" value="处理中" />
          <el-option label="已解决" value="已解决" />
        </el-select>
      </el-form-item>
      <el-form-item label="现场照片" :label-width=100>
        <el-upload
            class="avatar-uploader"
            action="/api/upload/file"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
        >
          <img  v-if="editObj.images" :src="editObj.images"  style="width:100px" />
          <img  v-else src='@/assets/logo.png'  style="width:100px"/>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editCancel">取消</el-button>
        <el-button type="primary" @click="editCommit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="addWinVisible" title="新增" width="800">
    <el-form :model="addObj">
      <el-form-item label="上报居民ID" :label-width="formLabelWidth">
        <el-input v-model="addObj.resident_id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="事件类型" :label-width="formLabelWidth">
        <el-select v-model="addObj.event_type" placeholder="请选择安全等级" style="width: 180px">
          <el-option label="" value="" />
          <el-option label="受伤" value="受伤" />
          <el-option label="火灾" value="火灾" />
          <el-option label="洪灾" value="洪灾" />
          <el-option label="病虫害" value="病虫害" />
          <el-option label="耕地纠纷" value="耕地纠纷" />
          <el-option label="牲畜丢失" value="牲畜丢失" />
          <el-option label="疾病求医" value="疾病求医" />
          <el-option label="其他" value="其他" />
        </el-select>
      </el-form-item>
      <el-form-item label="发生时间" :label-width="formLabelWidth">
        <el-date-picker
            v-model="addObj.event_time"
            type="date"
            placeholder="请选择事件发生时间"
            :size="size"
        />
      </el-form-item>
      <el-form-item label="事件地点" :label-width="formLabelWidth">
        <el-input v-model="addObj.location" autocomplete="off" />
      </el-form-item>
      <el-form-item label="事件描述" :label-width="formLabelWidth">
        <el-input v-model="addObj.description" autocomplete="off" />
      </el-form-item>
      <el-form-item label="紧急程度" :label-width="formLabelWidth">
        <el-select v-model="addObj.urgency_level" placeholder="请选择安全等级" style="width: 180px">
          <el-option label="" value="" />
          <el-option label="低" value="低" />
          <el-option label="中" value="中" />
          <el-option label="高" value="高" />
          <el-option label="紧急" value="紧急" />
        </el-select>
      </el-form-item>
      <el-form-item label="处理状态" :label-width="formLabelWidth">
        <el-select v-model="addObj.status" placeholder="请选择安全等级" style="width: 180px">
          <el-option label="" value="" />
          <el-option label="已上报" value="已上报" />
          <el-option label="已受理" value="已受理" />
          <el-option label="处理中" value="处理中" />
          <el-option label="已解决" value="已解决" />
        </el-select>
      </el-form-item>
      <el-form-item label="现场照片" :label-width=100>
        <el-upload
            class="avatar-uploader"
            action="/api/upload/file"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
        >
          <img  v-if="addObj.images" :src="addObj.images"  style="width:100px" />
          <img  v-else src='@/assets/logo.png'  style="width:100px"/>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addCancel">取消</el-button>
        <el-button type="primary" @click="addCommit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style></style>